<template>
  <div class="main">
    <div class="top">
        <i class="el-icon-back" @click="back"></i>
        <h2> 南一的菜鸡小窝 </h2>
    </div>
    <el-form :model="ruleForm" label-width="80px" :rules="rules" ref="ruleForm">
        <div class="title"> 信息 <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活动名称" prop="name">
                        <el-input size="mini" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动区域" prop="region">
                        <el-select size="mini" v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动名称" prop="name">
                        <el-input size="mini" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活动名称" prop="name">
                        <el-input size="mini" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动区域" prop="region">
                        <el-select size="mini" v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动名称" prop="name">
                        <el-input size="mini" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活动名称" prop="name">
                        <el-input size="mini" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动区域" prop="region">
                        <el-select size="mini" v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动名称" prop="name">
                        <el-input size="mini" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <hr>
        </div>
        <div class="title"> 参数 <br>
            <el-row class="row_span">
                <div> 名字:
                    <span>{{ ruleForm.name }}</span>
                </div>
                <div> 名字:
                    <span>{{ ruleForm.name }}</span>
                </div>
            </el-row>
            <el-row class="row_span">
                <div> 名字:
                    <span>{{ ruleForm.name }}</span>
                </div>
                <div> 名字:
                    <span>{{ ruleForm.name }}</span>
                </div>
            </el-row>
            <el-row class="row_span">
                <div> 名字:
                    <span>{{ ruleForm.name }}</span>
                </div>
                <div> 名字:
                    <span>{{ ruleForm.name }}</span>
                </div>
            </el-row>
            <hr>
        </div>
        <div class="title tableListTitle"> 表格 <br>
            <div class="tableList">
                <br>
                <el-row class="listRow">
                    <div class="div-icon">操作</div>
                    <div class="div-span">小A</div>
                    <div class="div-span">小B</div>
                    <div class="div-span">小C</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                    <div class="div-span">小D</div>
                </el-row>
                <br>
                <el-row  class="listRow" v-for="(e,i) in ruleForm.tableList" :key="i">
                    <div class="div-icon">
                        <i class="el-icon-circle-plus" @click="addTableList"></i>
                        <i class="el-icon-error" @click="delTableList(i)"></i>
                    </div>
                    <div class="div-span">
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <el-button size="small" type="text">点击上传</el-button>
                        </el-upload>
                        <!-- <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item> -->
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="div-span">
                        <el-form-item  
                        :rules = "rules.name"
                        :prop="'tableList.' + i + '.name'">
                            <el-input size="mini" v-model="e.name"></el-input>
                        </el-form-item>
                    </div>
                </el-row>
            </div>
            <hr>
        </div>
      
    </el-form>
  </div>

</template>

<script>
export default {
    name: 'table',
    data () {
        return {
            ruleForm:{
                tableList:[
                    {}
                ]
            },
            rules:{
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        back(){
            this.$refs['ruleForm'].resetFields();
            this.$router.go(-1);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        addTableList(){
            this.ruleForm.tableList.push({});
        },
        delTableList(i){
            if(this.ruleForm.tableList.length === 1){
                this.$message.error('请保留一行以便操作')
            }else{
                this.ruleForm.tableList.splice(i,1);
            }
        }
    },
}

</script>
<style scoped>
.main {
    width: 100%;
    height: 100%;
}
.title {
    margin-left: 15px;
    color: rgb(209, 154, 45);
    font-size: 16px;
    box-sizing: border-box;
}
hr {
    width: calc(100% - 25px);
    margin: 15px;
}
.top {
    display: flex;
    align-items: center;
}
.el-icon-back {
    margin: 15px;
    cursor: pointer;
    font-size: 20px;
}
.el-icon-error {
    margin-left: 2px;
    cursor: pointer;
    font-size: 20px;
}
.el-icon-circle-plus {
    margin-right: 2px;
    cursor: pointer;
    font-size: 20px;
}
.el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 12px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
}
.el-input >>> .el-input__inner {
    width: 70%;
}

.row_span {
    color: bisque;
    margin: 15px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}
.tableList {
    margin: 20px;
    width: 95%;
    background: #fbf7ee;
    overflow: auto;
}
.tableList::-webkit-scrollbar {
    width:6px;
    max-height:50px;
}
.tableList::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.tableList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

.listRow{
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
}
.div-span {
    min-width: 11%  !important;
    background-clip:content-box;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    
 }
 .div-icon {
    min-width: 7%  !important;
    background-clip:content-box;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    
 }  
.div-span /deep/.el-form-item__content{
    margin-left: 0 !important;
}
.div-span >>> .el-input {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 5px;
}
.div-span /deep/ .el-input__inner {
    width: 90%;
}
.div-span /deep/ .el-input /deep/ .el-form-item__error {
    padding-left: 10%;
}
</style>